<template>
  <div class="home" style="width: 100%;padding: 10px">
    <div style="margin:10px 0;">
      <el-input clearable v-model="search.name" placeholder="请输入姓名"
                style="width:20%;margin-right:10px;"></el-input>
      <el-input clearable v-model="search.phone" placeholder="请输入手机号"
                style="width:20%;margin-right:10px;"></el-input>

      <el-button type="primary" @click="load">查询</el-button>
    </div>
    <div style="display: flex; align-items: center; margin: 10px 0;">

      <img src="..\..\public\ai.png" alt="图标"
           style="width: 80px; height: 80px; margin-right: 10px;margin-left: 10px;">
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" clearable v-model="typedText"
                placeholder="AI 智能行动指引" style="margin:10px 0;width:38.8%;margin-right:10px;"></el-input>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column prop="recName" label="关联人姓名"/>
      <el-table-column prop="recPhone" label="关联人电话"/>
      <el-table-column prop="recAddress" label="关联人地址"/>
    </el-table>

    <el-table :data="tableDataCards" border stripe style="width: 100%;margin-top: 10px;">

      <el-table-column prop="value" label="关联银行卡号">

      </el-table-column>
    </el-table>

    <!-- <span class="text-button" ></span> -->


    <!-- 如果您仍然需要保留一个按钮或其他元素，可以在这里添加 -->
    <!-- <span class="text-button"></span> -->

  </div>
</template>

<script>
import {request} from '@/utils/request';
import axios from 'axios';

export default {
  name: 'HomeView3',
  components: {},
  data() {
    return {
      typedText: '', // 当前已渲染的文本
      isTyping: true, // 是否正在打字  
      typingInterval: 100, // 打字间隔（毫秒）  
      typingTimer: null, // 定时器ID 
      search: {
        name: '',
        phone: '',
        idCard: ''
      },
      suggest: "",
      tableData: [],
      tableDataCards: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  beforeDestroy() {
    this.stopTyping();
  },
  methods: {
    load() {
      axios.post("/api/relatedPeople/all", {
        executor: this.search.name,
        phone: this.search.phone,
        //idCard: this.search.idCard,
        //pageNum: this.currentPage,
        //pageSize: this.pageSize
      })
          .then(response => {
            const result = response.data;
            this.tableDataCards = []
            result.cards.forEach(item => {
              this.tableDataCards.push({value: item});
            });
            if (result.code == 0) {
              this.tableData = [{"recPhone": result.result.orderPhone}]
              this.typedText = "";
              this.suggest = "存在异常下单手机号";
            } else {
              this.tableData = result.result;
              this.typedText = "";
              this.suggest = result.suggestion;
              this.startTyping();
            }
          })
          .catch(error => {
            console.log('error', error);
          });
    },
    startTyping() {
      this.typingTimer = setInterval(() => {
        if (this.typedText.length < this.suggest.length) {
          this.typedText += this.suggest[this.typedText.length];
        } else {
          this.stopTyping();
        }
      }, this.typingInterval);
    },
    stopTyping() {
      if (this.typingTimer) {
        clearInterval(this.typingTimer);
        this.typingTimer = null;
        this.isTyping = false; // 可选：如果你想要在打字完成后启用输入框  
      }
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));  // deep copy to prevent modifying original data
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },

  }
}
</script>
<style scoped>
.text-button {
  /* 应用与el-button相似的样式，但移除所有可点击的样式 */
  padding: 8px 15px; /* 假设的padding，根据需要调整 */
  background-color: transparent; /* 透明背景 */
  border: none; /* 移除边框 */
  color: #409EFF; /* Element Plus主题色，根据需要调整 */
  font-size: 14px; /* 假设的字体大小，根据需要调整 */
  cursor: default; /* 默认光标，表示不可点击 */
  /* 你可以添加更多样式来匹配你的设计 */
}
</style>
  